<template>
	<view>
		<u-popup :show="popuo_show" round="20rpx" @close="onClose()" mode="bottom" bgColor="#ffffff">
			<view class="popup-view">
				<view class="title">
					<text>请选择序列号</text>
				</view>
				<view class="search">
					<input type="text" v-model="keyword" placeholder="请输入序列号" class="input" @input="onKeyWordInput()" @focus="onFocus" @blur="onBlur" :adjust-position="false" />
				</view>
				<picker-view :value="picker_index" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in old_list" :key="index">{{item.code}}</view>
					</picker-view-column>
				</picker-view>
				<view class="btn-group">
					<button class="btn cancel-btn" @click="onClose()">取消</button>
					<button class="btn" @click="onConfirm()">确认</button>
				</view>
				<view class="bottom-height" :style="bottom_height">

				</view>
			</view>
			<u-toast ref="uToast"></u-toast>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				popuo_show: false,
				keyword: "",
				picker_index: [0],
				old_list: [],
				xlh_list: [],
				value: "",
				timer: null,
				bottom: 0,
			}
		},
		created() {
			// this.getXlhList() //获取产品序列号列表
		},
		computed: {
			bottom_height: function() {
				return `height:${this.bottom}px`
			}
		},
		methods: {
			// getXlhList() {
			// 	this.api.post("/api/work/productList").then(res => {
			// 		this.xlh_list = res
			// 		this.list = JSON.parse(JSON.stringify(this.xlh_list))
			// 	}).catch(err => {
			// 		this.apiErr(err)
			// 	}).finally(() => {
			// 		this.loadingHide();
			// 	})
			// },
			show() {
				this.keyword = ""
				this.picker_index = [0]
				this.old_list = JSON.parse(JSON.stringify(this.list))
				this.popuo_show = true
			},
			bindChange(e) {
				this.picker_index = e.detail.value
			},
			onClose() {
				this.popuo_show = false
			},
			onKeyWordInput() {
				if (!this.keyword) {
					this.old_list = JSON.parse(JSON.stringify(this.list))
					return
				}
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.search()
				}, 300)


			},
			onFocus(e) {
				this.bottom = e.detail.height
			},
			onBlur() {
				this.bottom = 0
			},
			search() {
				const list = [];
				this.list.forEach((e) => {
					if (e.code.indexOf(this.keyword) > -1) {
						list.push(e)
					}
				})
				this.old_list = JSON.parse(JSON.stringify(list))
			},
			onConfirm() {
				if (this.old_list.length === 0) return this.fail("请选择序列号")
				const item = this.old_list[this.picker_index[0]]
				this.$emit("confirm", item)
				this.popuo_show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-view {
		display: flex;
		flex-direction: column;

		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: bold;
			color: #000000;
			height: 140rpx;
		}

		.search {
			width: 690rpx;
			margin: 0rpx 30rpx 0;
			display: flex;
			align-items: center;
			height: 100rpx;
			border-radius: 80px;
			background-color: #f7f7f7;
			padding: 0 30rpx;


			.input {
				flex: 1;
				text-align: center;
				line-height: 100rpx;
			}
		}

		.picker-view {
			height: 400rpx;
			margin-right: 20rpx;
			margin-top: 20rpx;
		}


		.item {
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.btn-group {
			display: flex;
			align-items: center;
			padding: 30rpx 30rpx;

			.btn {
				flex: 1;
				margin-right: 30rpx;
			}

			.cancel-btn {
				background: #eeeeee;
				color: #666666;
			}

			.btn:last-child {
				margin-right: 0;
			}
		}

		.bottom-height {
			width: 100%;
		}
	}
</style>